除了轉場還可以讓網頁元素進行「變化」，CSS Transforms 可以對元素進行位移、旋轉、縮放、傾斜等操作。

• transform: translate(x, y);：位移。x 和 y 分別代表水平和垂直方向的位移量。
• transform: rotate(角度);：旋轉。角度單位可以是 deg (度)。
• transform: scale(x, y);：縮放。x 和 y 分別代表水平和垂直方向的縮放比例。
• transform: skew(x-angle, y-angle);：傾斜。

這些屬性可以組合使用，例如：transform: scale(1.1) rotate(5deg);。

作品集頁面的圖片加上滑鼠懸停時的縮放效果。
在 style.css 中：

CSS

.portfolio-item img {
  width: 100%;
  transition: transform 0.3s ease;
}
.portfolio-item:hover img {
  transform: scale(1.1); /* 放大 1.1 倍 */
}

當滑鼠移到圖片上時，圖片會平滑地放大，讓作品看起來更有趣。Transforms 是製作酷炫動態效果的好工具，但不要過度使用，以免影響使用者體驗。

執行成果 :